<template>
<el-container>
  <el-header style="height: auto;">
    <el-row type="flex" justify="end" align="top">
      <el-col class="add" :xl="{ span: 6 }">
        <el-button type="primary" size="small" @click="toAddPackage">增加套餐</el-button>
      </el-col>
    </el-row>
    <el-form :model="form" :rules="formRules">
      <el-row>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="套餐名称" label-width="100px" prop="mealName">
            <el-input size="small" style="width: 95%;" v-model="form.mealName"></el-input>
          </el-form-item>
        </el-col>
        <!--el-col(:xl="{ span: 6 }")
        el-form-item(label="针对客户类型" label-width="100pvaluex")
          el-select(size="small" v-model="dictMealType" placeholder="请选择" style="width: 95%;")
            el-option(
              v-for="agentRange in agentRangeSelect"
              //:key="agentRange.value"
              //:label="agentRange.label"
              //:value="agentRange.value")

        -->
        <!--el-col(:xl="{ span: 6 }")
        el-form-item(label="所属通道" label-width="100px")
          el-select(size="small" v-model="agentRangeSearch" placeholder="请选择" style="width: 95%;")
            el-option(
              v-for="agentRange in agentRangeSelect"
              //:key="agentRange.value"
              //:label="agentRange.label"
              //:value="agentRange.value")

        -->
        <!--el-col(:xl="{ span: 6 }")
        el-form-item(label="状态" label-width="100px")
          el-select(size="small" v-model="agentRangeSearch" placeholder="请选择" style="width: 100%;")
            el-option(
              v-for="agentRange in agentRangeSelect"
              //:key="agentRange.value"
              //:label="agentRange.label"
              //:value="agentRange.value")

        -->
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item>
            <el-button size="small" type="primary" @click="currentPage = 0 ; initData()">查询</el-button>
            <el-button size="small">导出</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-header>
  <el-main style="height: auto;">
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column prop="mealName" label="套餐名称" align="center"></el-table-column>
      <el-table-column prop="dictMealType" label="套餐类型" align="center"></el-table-column>
      <el-table-column prop="officialPrice" label="套餐价格(元)" align="center"></el-table-column><!--el-table-column(-->
<!--prop="pidName"-->
<!--label="所属通道"-->
<!--align="center")-->
      <el-table-column prop="dictTerOfValidityName" label="有效期" align="center"></el-table-column>
      <el-table-column prop="mealSpec" label="规格/MB" align="center"></el-table-column>
      <el-table-column prop="dictIsTerOfValiditySuper" label="是否连续充值" align="center"></el-table-column>
      <el-table-column prop="insertTime" label="增加时间" align="center"></el-table-column>
      <!--el-table-column(
      prop="cardCount"
      label="修改时间"
      align="center")
      -->
      <el-table-column prop="name" label="操作" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <div>
              <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-button class="operation" @click="showDeletePackage(scope.row)">删除套餐</el-button>
              <el-button class="operation" @click="viewPackage(scope.row)">查看套餐</el-button>
              <el-button class="operation" @click="editPackage(scope.row)">编辑套餐</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="block"><span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :page-count="maxPage" :hide-on-single-page="value" background></el-pagination>
    </div>
  </el-main>
  <!--删除-->
  <el-dialog class="delete" top="33vh" :visible.sync="operation.delete" :append-to-body="true" width="30%"><span>确定删除套餐吗？</span><span class="dialog-footer" slot="footer">
      <el-button @click="operation.delete = false" size="small">取 消</el-button>
      <el-button type="primary" @click="submitDeletePackage()" size="small">确 定</el-button></span></el-dialog>
  <!--查看套餐-->
  <el-dialog class="view" top="20vh" :visible.sync="operation.view" :append-to-body="true" width="30%">
    <el-form ref="form" :model="form" label-width="110px">
      <el-form-item label="是否包含语音" prop="dictIsVoice">
        <el-input size="small" v-model="form.dictIsVoice"></el-input>
      </el-form-item>
      <!--el-form-item(label="通电激活")el-input(size="small" v-model="form.dictIsEnergizingActivation")
      -->
      <!--el-form-item(label="实名自动充值")el-input(size="small" v-model="dictIsVoice")
      -->
      <!--el-form-item(label="是否置顶")el-input(size="small" v-model="dictIsVoice")
      -->
      <el-form-item label="可否连续充值" prop="dictIsTerOfValiditySuper">
        <el-input size="small" v-model="form.dictIsTerOfValiditySuperName"></el-input>
      </el-form-item>
      <el-form-item label="可否预存" prop="dictIsPreStorage">
        <el-input size="small" v-model="form.dictIsPreStorageName"></el-input>
      </el-form-item>
      <el-form-item label="是否分月到账" prop="dictMonthlyPayment">
        <el-input size="small" v-model="form.dictMonthlyPayment"></el-input>
      </el-form-item>
    </el-form><span class="dialog-footer" slot="footer">
      <el-button @click="operation.view = false" size="small">关 闭</el-button></span>
  </el-dialog>
</el-container>
</template>

<script>
import { packageList, packageDelete, packageDetail } from '@/api/getData'

export default {
  name: 'PackageList',
  data() {
    const validateMealName = (rule, value, callback) => {
      if (value.length > 64) {
        callback(new Error('套餐名称不能超过64位'))
      } else {
        callback()
      }
    }
    return {
      formRules: {
        mealName: [{ trigger: 'blur', validator: validateMealName }]
      },
      form: {
        dictIsVoice: '',
        dictIsEnergizingActivation: '',
        dictIsTerOfValiditySuperName: '',
        dictIsPreStorageName: '',
        dictMonthlyPayment: '',
        mealName: ''
      },
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      ascs: [],
      descs: [],
      operation: {
        delete: false,
        view: false
      },
      multipleSelection: [],
      mealName: '',
      dictMealTypeName: '',
      officialPrice: '',
      dictTerOfValidity: '',
      dictIsEnergizingActivation: '',
      dictIsPreStorage: '',
      mealSpec: '',
      dictIsTerOfValiditySuper: '',
      cardState: '',
      insertTime: '',
      dictTerOfValidityName: '',
      terOfValidity: '',
      value: false,
      tableLoading: false,
      id: '',
      dictIsVoice: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
    async initData() {
      const returnData = await packageList({
        mealName: this.form.mealName,
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      },
      {
        obj: this,
        key: 'tableLoading;'
      })
      this.tableData = []
      //console.log(returnData)
      if (returnData._result) {
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.terOfValidity = item.terOfValidity // 有效期number
          obj.mealName = item.mealName // 套餐名称
          obj.dictMealType = item.dictMealTypeName // 套餐类型
          obj.officialPrice = item.officialPrice // 套餐价格
          obj.dictTerOfValidity = item.dictTerOfValidity // 有效期单位
          obj.dictTerOfValidityName = item.terOfValidity + item.dictTerOfValidityName
          obj.mealSpec = item.mealSpec // 规格
          obj.dictIsTerOfValiditySuper = item.dictIsTerOfValiditySuperName // 有效期叠加
          obj.insertTime = item.insertTime // 增加时间
          obj.dictIsPreStorage = item.dictIsPreStorageName
          this.tableData.push(obj)
        })
        this.tableLoading = false
      }
    },
    toAddPackage() {
      this.$router.push({ path: '/package/add-package' })
    },
    showDeletePackage(user) {
      this.id = user.id
      this.operation.delete = true
    },
    async submitDeletePackage() {
      const returnData = await packageDelete({
        id: this.id
      })
      if (returnData._result) {
        this.operation.delete = false
        this.$message({ message: '删除成功', type: 'success' })
        this.initData()
      }
    },
    async viewPackage(user) {
      this.operation.view = true
      const returnData = await packageDetail({
        id: user.id
      })
      if (returnData._result) {
        this.form.dictIsTerOfValiditySuperName = user.dictIsTerOfValiditySuper
        this.form.dictIsPreStorageName = user.dictIsPreStorage
        this.form.dictIsVoice = user.dictIsVoice
        this.form.dictMonthlyPayment = user.dictMonthlyPayment
      }
    },
    editPackage(user) {
      this.$router.push({ path: `/package/edit-package/${user.id}` })
    }
  }
}
</script>

<style scoped lang="scss">
.el-container {
  .el-header {
    margin-top: 5vh;
    .el-form-item /deep/ label {
      text-align: left;
    }
    .add {
      display: flex;
      flex-direction: row-reverse;
      margin-bottom: 3vh;
    }
  }
  .el-main {
    .block {
      float: right;
    }
    .el-dropdown-link {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.el-popper[x-placement^=bottom] {
  margin-right: -34px;
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;

  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
.el-popper[x-placement^=top] {
  box-shadow: 0px 0px 10px #888888;
  margin-left: 6px;
  margin-right: -39px;
  button {
    display: block;
  }
  .operation {
    border: 0;
    outline: none;
    display: block;
    text-align: center;
    margin: 0;
  }
}
.delete /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}
.view /deep/ .el-dialog__body {
  text-align: center;
  font-size: 14px;
  font-family: 微软雅黑;
  line-height: 40px;
  color: #606266;
  font-weight: 700;
}
.btn {
  border: none;
}
</style>
